<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>【mhys】测试</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/page.css"/>
    <link rel="stylesheet" href="../css/currency.css">
    <link rel="stylesheet" href="../css/optgroups.css">
    <link rel="stylesheet" href="../css/music.css">
    <style>
        body {
            background: rgba(246, 250, 240, 0.84);
        }
    </style>

</head>
<body>
<!--*****************************************************************************************************************-->

<h4 style="color: red" title="按照自然规律所推断，请勿迷信。">声明：内容仅供参考。</h4>

<!--*****************************************************************************************************************-->

<!-- 音频 -->
<audio
        id="music"
        controlsList="nodownload"
        autoplay="autoplay"
        loop="loop"
>
    <!-- 以下路径可添加音屏文件：/cesuan/audio/音频文件名 -->
    <source src="/cesuan/audio/music" type="audio/mp3">
    <source src="/cesuan/audio/music" type="audio/ogg">
    <embed height="10" width="10" src="/cesuan/audio/music">
</audio>
<!-- 音乐图标 -->
<div class="a">
    <img
            id="musicPattern"
            onclick="musics()"
            src="../imgs/music.jpg"
            width="50px"
            alt="图片资源加载失败"
            title="播放/暂停"
    >
</div>
<!-- ★音频控制★ -->
<script>
    // 默认初始音量（0 ~ 1）
    document.getElementById("music").volume = 0.1;
</script>

<!--*****************************************************************************************************************-->

<!-- ★标题★ -->
<div class="boc">
    <h1>
        <a href="mhys.html" title="【梅花易数】">
            <h1>【mhys】测试</h1>
        </a>
    </h1>
</div>
<br>

<!--*****************************************************************************************************************-->

<!-- ★日期复选框★ -->
<div id="app">
    <template>
        <div class="block">&nbsp;&nbsp;&nbsp;&nbsp;
            <!-- 日期模式选择 -->
            <template>
                <el-radio v-model="radio" label="0" border title="按照公历日期测算">公历</el-radio>
                <el-radio v-model="radio" label="1" border title="按照农历日期测算">农历</el-radio>
            </template>
            <!-- 日期选择 -->
            <el-date-picker
                    v-model="value"
                    type="datetime"
                    value-format="yyyy-MM-dd-HH-mm-ss"
                    placeholder="请选择日期"
                    align="right"
                    :picker-options="pickerOptions"
            ></el-date-picker>&nbsp;&nbsp;
            <el-button
                    round
                    type="primary"
                    title="开始测算"
                    @click="getDateTime(date)"
            >
                开始测算
            </el-button>

        </div>
    </template>
</div>

<!--*****************************************************************************************************************-->

<!-- ★数据操作及展示★ -->
<div class="dashboard-container" id="member-app">
    <div class="container">

        <!-- 日期查询 -->
        <el-input
                maxlength="14"
                show-word-limit
                clearable
                v-model="input"
                placeholder="请输入农历日期"
                title="示例：二〇二〇年一月十三卯时"
                style="width: 300px"
                @keyup.enter.native="handleQuery"
        >
            <i
                    slot="prefix"
                    class="el-input__icon el-icon-search"
                    style="cursor: pointer"
                    title="查询"
                    @click="handleQuery"
            ></i>
        </el-input>&nbsp;
        <el-button
                slot="prefix"
                style="cursor: pointer"
                title="查询"
                round
                @click="handleQuery"
        >
            查询测算记录
        </el-button>
        <br><br>

        <!-- 测算按钮 -->
        <div class="tableBar">
            <!-- 现时测算 -->
            <el-button
                    round
                    type="success"
                    title="按照当前公历日期测算"
                    @click="calculation()"
            >
                现时<br/>测算
            </el-button>
            <!-- 刷新页面 -->
            <el-button
                    round
                    type="warning"
                    title="获取最新数据"
                    @click="success()"
            >
                刷新
            </el-button>
        </div>

        <!-- ★★★数据列表★★★ -->
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
        >
            <el-table-column
                    width="50"
                    type="index"
                    label="序号"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    width="80"
                    label="★"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p>测算信息: 【<a style="color: red">{{ scope.row.allInformation }}</a>】</p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">ALL</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="solarDate" width="210" align="center">
                <template slot="header">
                    <div>测算日期</div>
                    <div>(公历)</div>
                </template>
            </el-table-column>
            <el-table-column
                    width="90"
                    prop="lunarDate"
                    label="测算日期(农历)"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="157"
                    prop="baZi"
                    label="八字"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="157"
                    prop="baZiWuXing"
                    label="八字五行"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="208"
                    prop="baZiNaYin"
                    label="八字纳音"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="80"
                    prop="guaMa"
                    label="卦码"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="130"
                    prop="shangGua"
                    label="上卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="130"
                    prop="xiaGua"
                    label="下卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="100"
                    prop="dongYao"
                    label="动爻"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="120"
                    prop="benGua"
                    label="本卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="120"
                    prop="huGua"
                    label="互卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="120"
                    prop="bianGua"
                    label="变卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="120"
                    prop="cuoGua"
                    label="错卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="120"
                    prop="zongGua"
                    label="综卦"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="290"
                    prop="information"
                    label="其他信息"
                    align="center"
            ></el-table-column>
            <el-table-column
                    width="122"
                    prop="createTime"
                    label="操作时间(公历)"
            ></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-row>
                        <el-button-group style="margin-bottom:20px">
                            <!-- 删除按钮 -->
                            <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="deleteHandle(scope.row.id)"
                                    size="small"
                                    title="删除"
                            ></el-button>
                        </el-button-group>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页条 -->
        <el-pagination
                background
                class="pageList"
                :page-sizes="[5, 9, 15, 19]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                :current-page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
        </el-pagination>

    </div>
    <br>

    <!-- 【时家奇门】测试 -->
    <a href="sjqm.html">
        <el-button
                round
                title="【时家奇门】测试"
        >
            <h2 style="color: black">【sjqm】测试</h2>
        </el-button>
    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <!-- 【小六壬】测试 -->
    <a href="xlr.html">
        <el-button
                round
                title="【小六壬】测试"
        >
            <h2 style="color: black">【xlr】测试</h2>
        </el-button>
    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <!-- 更多数据 -->
    <a href="knowledge.html">
        <el-button
                type="primary"
                icon="el-icon-check"
                circle
                title="更多"
        >
            更多
        </el-button>
    </a>

</div>

<!--*****************************************************************************************************************-->

<!-- ★其他功能★ -->
<p> &nbsp; </p>
<div class="bod"><h3>更多功能正在飞奔而来...</h3></div>
<p> &nbsp; </p>
<p> &nbsp; </p>

<!--*****************************************************************************************************************-->

<!-- 引入各类组件 -->
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../js/music.js"></script>
<script src="../api/api.js"></script>

<!--*****************************************************************************************************************-->

<script>

    /**
     * 日期格式化
     */
    function dateFormatter(str) { // 默认返回yyyy-MM-dd-HH-mm-ss

        var hasTime = arguments[1] !== false; // 可传第二个参数false，返回yyyy-MM-dd
        var d = new Date(str);
        var year = d.getFullYear();
        var month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
        var day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
        var hour = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
        var minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
        var second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
        if (hasTime) {
            return [year, month, day].join('-') + "-" + [hour, minute, second].join('-');
        } else {
            return [year, month, day].join('-');
        }

    }

    /**
     * 日期选择
     */
    var Main = {
        data() {
            return {
                pickerOptions: { // 快捷选择
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '一天前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '两天前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '三天前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 3);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '四天前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 4);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '五天前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 5);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '六天前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 6);
                            picker.$emit('pick', date);
                        }
                    }
                        , {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }

                    ]
                },
                radio: '0', // 默认选择公历
                value: dateFormatter(new Date(), true), // 日期数据，默认显示当前日期时间
            };
        },

        methods: {

            /**
             * 指定日期测算
             */
            getDateTime(date) {
                mhysCeSuan(date = (this.value + "-" + this.radio)).then(res => {
                    if (res.code === 1) {
                        // 弹框提示
                        this.$message({
                            showClose: true, // 可关闭弹窗
                            type: 'success',  // 样式
                            message: '测算成功！'
                        });
                        window.location.href = "mhys.html"; // 重新查询
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            }

        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    /**
     * 基础操作及方法
     */
    new Vue({
        el: '#member-app',
        data() {
            return {
                input: '',
                counts: 0,
                page: 1,
                pageSize: 5,
                tableData: [],
                id: ''
            }
        },

        computed: {},
        created() {
            this.init()
            this.lunarDate = JSON.parse(localStorage.getItem('date'))
        },
        mounted() {
            this.restaurants = this.loadAll();
        },

        methods: {

            /**
             * 查询
             */
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    lunarDate: this.input ? this.input : undefined
                }
                await mhysPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错：' + err)
                })
            },

            /**
             * 现时测算
             */
            calculation() {
                mhysNowDate().then(res => {
                    if (res.code === 1) {
                        // 消息提示
                        this.$message({
                            showClose: true, // 可关闭弹窗
                            type: 'success',  // 样式
                            message: '测算成功！'
                        });
                        this.handleQuery() // 重新查询
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },

            /**
             * 重新查询
             */
            handleQuery() {
                this.page = 1;
                this.init();
            },

            /**
             * 删除
             */
            deleteHandle(id) {
                this.$confirm('是否确认删除?', '警告', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    mhysDelete(id).then(res => {
                        console.log('deleteMhys', res)
                        if (res.code === 1) {
                            this.$message({
                                showClose: true, // 可关闭弹窗
                                message: '删除成功',
                                type: 'success'  // 样式
                            });
                            this.handleQuery() // 重新查询
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                }).catch(() => {
                    this.$message({
                        showClose: true, // 可关闭弹窗
                        message: '已取消删除',
                        type: 'success'  // 样式
                    });
                })
            },

            /**
             * 翻页
             */
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
                this.operation()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
                this.operation()
            },

            /**
             * 上边栏【刷新成功】弹窗
             */
            success() {
                // 调取方法
                this.handleQuery()
                // 弹框提示
                this.$notify({
                    title: '已刷新',
                    type: 'success'
                });
            },

            /**
             * 右边栏【操作成功】弹窗
             */
            operation() {
                // 调取方法
                this.handleQuery()
                // 弹框提示
                this.$notify({
                    title: '操作成功',
                    type: 'success'
                });
            }
        }
    })

</script>

<!--*****************************************************************************************************************-->

</body>
</html>